<template>
	<div class="body">
		<el-row class="navs">
			<el-col :span="4" class="title">
				菜单管理
			</el-col>
			<el-col :span="20" class="btns">
				<el-button size="mini" type="primary" :disabled="currentRow==null" @click="addOpe()">添加子菜单</el-button>
				<el-button size="mini" type="primary" :disabled="currentRow==null" @click="editOpe()">编辑</el-button>
				<el-button size="mini" type="danger" :disabled="currentRow==null||currentRow.id==0" @click="delOpe()">删除
				</el-button>
			</el-col>
		</el-row>
		<div class="content">
			<el-table :data="tableData" style="width: 100%" row-key="id" lazy :load="load"
				:tree-props="{ children: 'children'}" :highlight-current-row="true" @row-click="onRowClick">
				<el-table-column prop="operationname" label="部门名称"> </el-table-column>
				<el-table-column prop="operationcode" label="部门编码"> </el-table-column>
				<el-table-column prop="ordernumber" label="排序"> </el-table-column>
				<el-table-column prop="id" label="ID值"> </el-table-column>
			</el-table>

			<el-dialog title="机构信息" :visible.sync="dlg_ope">
				<el-form :model="frm_ope">
					<el-form-item label="菜单名称" :label-width="frm_lbl_w">
						<el-input ref="OperationName" v-model="frm_ope.OperationName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="*菜单编码" :label-width="frm_lbl_w">
						<el-input ref="OperationCode" v-model="frm_ope.OperationCode" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="排序号" :label-width="frm_lbl_w">
						<el-input type="number" style="width: 80px;" v-model="frm_ope.OrderNumber" autocomplete="off">
						</el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dlg_ope = false">取 消</el-button>
					<el-button type="primary" @click="addOpeInfo()">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	import {
		get,
		post
	} from "/common/apiconfig"
	export default {
		data() {
			return {
				currentRow: null,
				blnFormEdit: false,
				ParentID: 0,
				frm_ope: {},
				items: [],
				dlg_ope: false,
				frm_lbl_w: "120px",
				tableData: []
			};
		},
		mounted: function() {
			this.getOrgList();
		},
		methods: {
			onRowClick(row) {
				this.currentRow = row;
			},
			addOpe() {
				if (!this.currentRow) {
					this.$message.error('请选择一条记录！');
				} else {
					this.frm_ope = {
						"OperationCode": "",
						"OperationName": "",
						"OrderNumber": 0
					}
					this.dlg_ope = true;
					this.ParentID = this.currentRow.id;
					this.blnFormEdit = false;
				}
			},
			editOpe() {
				if (!this.currentRow) {
					this.$message.error('请选择一条记录！');
				} else {
					this.dlg_ope = true;
					get('/OperationInfo?ID=' + this.currentRow.id).then(d => {
						this.frm_ope = {
							"OperationCode": d.data.OperationCode,
							"OperationName": d.data.OperationName,
							"OrderNumber": d.data.OrderNumber,
							"ParentID": d.data.ParentID
						};
					})
					this.blnFormEdit = true;
				}
			},
			delOpe() {
				if (!this.currentRow) {
					this.$message.error('请选择一条记录！');
				} else {
					let that = this;
					this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						post('/OperationDelete', {
							ID: this.currentRow.id
						}).then(d => {
							if (d.code == "001") {
								that.$message({
									type: 'success',
									message: '删除成功!'
								});
								this.getOrgList();
							} else {
								that.$message.error('删除出错！');
							}
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			},
			load(tree, treeNode, resolve) {
				post('/ListOperation', {
					ParentID: tree.id
				}).then((d) => {
					let _data = d.data;
					_data.forEach(it => {
						it.hasChildren = true;
					})
					resolve(_data)
				})
			},
			addOpeInfo() {
				if (this.frm_ope.OperationCode === '') {
					this.$refs.OperationCode.focus();
					return false
				}
				if (this.frm_ope.OperationName === '') {
					this.$refs.OperationName.focus();
					return false
				}
				let that = this;
				let arr = []
				if (this.blnFormEdit) {
					this.frm_ope.ID = this.currentRow.id;
					arr = this.frm_ope;
					post('/UpdateOperation',
						arr).then(d => {
						if (d.code == "001") {
							that.$message({
								message: '更新成功！',
								type: 'success'
							})
							this.getOrgList();
							that.dlg_ope = false
						} else {
							that.$message.error('更新出错！');
						}
					})
				} else {
					this.frm_ope.ParentID = this.currentRow.id;
					arr = this.frm_ope;
					console.log(arr, this.currentRow)
					post('/NewOperation',
						arr).then(d => {
						if (d.code == "001") {
							that.$message({
								message: '增加成功！',
								type: 'success'
							})
							this.getOrgList();
							that.dlg_ope = false
						} else {
							that.$message.error('增加出错！');
						}
					})
				}
			},
			getOrgList() {
				post('/ListOperation', {}).then((d) => {
					this.items = d.data;
					this.tableData = this.items;
					this.tableData.forEach(item => {
						item.hasChildren = true;
					})
				});
			}
		},
	};
</script>
<style scoped>
	.body {
		border: solid 1px #E9E9E9;
		border-radius: 8px 8px 0 0;
		background-color: #fff;
	}
	
	.navs {
		padding: 10px;
		border-radius: 8px 8px 0 0;
		background-color: #F9F9F9;
		margin-bottom: 10px;
		border-bottom: solid 1px #E9E9E9;
	}
	
	.title {
		font-size: 15px;
		font-weight: 700;
		padding-top: 3px;
	}
	
	.btns {
		display: flex;
		justify-content: flex-end;
	}
	
	.content {
		margin: 30px;
	}
	
	.rowbg {
		background-color: #F0F2F5;
	}
</style>
